<template>
	<view>
		<scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
		          <view class="item" v-for="(item, index) in navList" :class="{active: curNav == item.id}" :key="index" @click="switchNav(item.id, index)">
		            {{item.name}}
		        </view>
		</scroll-view>
		<mescroll-uni ref="mescroll" @init="mescrollInit" :top="mescrollTop" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<!-- 列表渲染 -->
			<view class="video-list">
				<view class="video-item" v-for="(item, index) in relatedVideo" :key="index">
					<view class="video-wrap">
						<image class="img" :src="item.coverUrl + $imgSuffix"></image>
						<view class="desc ellipsis">{{item.title}}</view>
						<view class="creater-bar flex-box">
							<view class="avactor-box flex-box">
								<image class="avactor" src=""></image>
								<view class="name">{{item.creator[0].userName}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{
			MescrollUni
		},
		data() {
			return {
				curNav: 34571,
				relatedVideo:[],
				navList: [{
					name: '推荐',
					id: 34571
				},
				{
					name: 'LOCK直播',
					id: 23472
				},
				{
					name: '翻唱',
					id: 33485
				},
				{
					name: '广场',
					id: 4652
				},
				{
					name: '舞蹈',
					id: 658785
				},
				{
					name: '游戏',
					id: 62689
				},
				{
					name: '现场',
					id: 7456345
				},
			],
			mescrollTop: 210, // 满足app高度
			// 下拉刷新的常用配置
			downOption: {
				auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
			},
			// 上拉加载的常用配置
			upOption: {
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
			},
			}
		},
		mounted() {
			this.getList(1,1)
		},
		methods: {
			mescrollInit(){
				this.mescroll = this.$refs.mescroll
			},
			// 导航切换
			switchNav(id, index) {
				this.curNav = id
				this.sliderWidth = index == 1 ? 140 : 60;

				this.sliderOffset = 126 * index + (index > 1 ? 80 : 16) + (index == 0 && 16);

				this.getList(1, 1)
			},
			downCallback(mescroll){
				mescroll.resetUpScroll();
			},
			upCallback(mescroll){
				this.getList(mescroll.num, mescroll.size, (res) => {
					//设置列表数据
					if (mescroll.num == 1) this.relatedVideo = []; //如果是第一页需手动置空列表
					this.relatedVideo = this.relatedVideo.concat(res)

					// 后台接口有返回列表的总数据量 totalSize
					// mescroll.endBySize(10, 50); //必传参数(当前页的数据个数, 总数据量)
					mescroll.endSuccess();
				}, () => {
					//联网失败的回调,隐藏下拉刷新的状态
					mescroll.endErr();
				})
				this.getList(mescroll.num, mescroll.size,'concat',mescroll)
			},
			// 获取相关视频
			getList(pageNum, pageSize, type,mescroll) {
				const params = {
					id: this.curNav,
					pageNum,
					pageSize,
				}
				this.pageNum = pageNum
				uni.request({
					url:'http://localhost:3000/related/allvideo', 
					method: 'GET', 
					data: params, 
					success: res => {
						console.log(res.data,'res',this.$refs.mescroll)
						if(type === 'concat'){
							this.relatedVideo = this.relatedVideo.concat(res.data.data)
							mescroll.endSuccess();
						}else{
							this.relatedVideo = res.data.data
						}
						
					}, 
					complete: () => { 
						// 加载完成状态 
					} ,
				}); 
			},
		}
	}
</script>

<style lang="scss">
	.video-list {
			color: #333;
			background: #f8f8f8;
	
			.tit-bar {
				padding-left: 32rpx;
			}
	
			.video-item {
				padding-top: 32rpx;
				background: #fff;
				border-bottom: 24rpx solid #f8f8f8;
			}
	
			.video-wrap {
				width: 686rpx;
				margin: 0 auto;
			}
	
			.img {
				display: block;
				width: 686rpx;
				height: 390rpx;
				border-radius: 10rpx;
				background: #eee;
			}
	
			.desc {
				font-size: 30rpx;
				font-weight: 600;
				line-height: 84rpx;
				border-bottom: 1rpx solid #e6e6e6;
			}
		}
	  	.scroll-view {
	  		position: fixed;
	  		top: 64px;
	  		width: 100%;
	  		height: 86rpx;
	  		white-space: nowrap;
	  		text-align: center;
	  		line-height: 86rpx;
	  		color: #333;
	  		font-weight: 600;
	  		border-bottom: 1rpx solid #e6e6e6;
	  		z-index: 10;
	  		background: #fff;
	  		/* #ifdef H5 */
	  		top: 44px;
	  
	  		/* #endif */
	  		.item {
	  			position: relative;
	  			display: inline-block;
	  			min-width: 126rpx;
	  			height: 86rpx;
	  			line-height: 86rpx;
	  			padding: 0 20rpx;
	  
	  			&.active {
	  				color: #f32628;
	  			}
	  		}
	  	}
</style>
